<template>
  <div class="container">
    <div class="video-detail">
      <div class="section">
        <video class="video" :src="require('@/assets/video/ceshi.mp4')" controls="controls"></video>
        <div class="title">十八届中央纪律检查委员</div>
        <div class="hits">20008次播放</div>
        <div class="btns">
          <div class="left">
            <span>
              <van-icon name="chat-o" color="#e71f19"/>学习笔记
            </span>
          </div>
          <div class="right">
            <span>
              <van-icon name="star-o" color="#e71f19"/>收藏
            </span>
            <span>
              <van-icon name="share" color="#e71f19"/>分享
            </span>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="title">视频推荐</div>
        <div class="list">
          <div class="video-cell">
            <div class="left">
              <video class="video" :src="require('@/assets/video/ceshi.mp4')"></video>
            </div>
            <div class="right">
              <div class="title">中国人民政治协商会议第十三届全国委员会.</div>
              <div class="date">党建新闻 2018-04-13 15:21:26</div>
            </div>
          </div>
          <div class="video-cell">
            <div class="left">
              <video class="video" :src="require('@/assets/video/ceshi.mp4')"></video>
            </div>
            <div class="right">
              <div class="title">中国人民政治协商会议第十三届全国委员会.</div>
              <div class="date">党建新闻 2018-04-13 15:21:26</div>
            </div>
          </div>
          <div class="video-cell">
            <div class="left">
              <video class="video" :src="require('@/assets/video/ceshi.mp4')"></video>
            </div>
            <div class="right">
              <div class="title">中国人民政治协商会议第十三届全国委员会.</div>
              <div class="date">党建新闻 2018-04-13 15:21:26</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      id: '',
      detail: {}
    }
  },
  created () {
    const id = this.$route.query.id
    if (id) {
      this.id = id
      this.getDetail()
    }
  },
  methods: {
    getDetail (callback) {
      this.$axios
        .get('/xbkj-dj/web/subject/getContentById', {
          id: this.id
        })
        .then(res => {
          let detail = res.data
          this.detail = detail
        })
    }
  }
}
</script>
<style lang="less" scoped>
.video-detail {
  background-color: #fff;
  .section {
    border-bottom: 1px solid #d6d6d6;
    padding: 20px 20px 10px 20px;
  }
  .video {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .title {
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 10px;
  }
  .hits {
    font-size: 12px;
    color: #999;
    line-height: 1;
    margin-bottom: 10px;
  }
  .btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.video-cell {
  display: flex;
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px dashed #e5e5e5;
  background-color: #fff;
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 5px;
    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      /*! autoprefixer: off*/
      -webkit-box-orient: vertical;
      /* autoprefixer: on*/
      -webkit-line-clamp: 2;
      font-size: 14px;
    }
    .date {
      font-size: 12px;
      color: #999;
    }
  }
  .left {
    flex: 0 0 115px;
    width: 115px;
    height: 75px;
    margin-right: 8px;
    video {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
  }
}
</style>
